<template>
  <el-drawer  :visible.sync="open_birthdaystudent" direction="rtl" size="35%" :show-close="false" :wrapperClosable="false">
    <div >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">学员生日</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt10  ">
            <el-button @click="cancel" style="width: 100px;margin-right: 50px;">取消</el-button>
          </div>
        </el-col>
      </el-row>



 <el-divider style="width: 80%;"></el-divider>




 <div class="   hovercolor stylecard mt10  ml20 mr20 " :class="selectedIndex1 == index ? 'changecolor':''"
    v-for="(item,index) in studentList" :key="item.id" @click="GetMessage(1,index,item.id)">


    <div class="classflex-left  mb20 pd10 mt10 ml10">
      <div>

        <img src="@/assets/touxiang.png" alt="">
      </div>
      <div class="ml20"   >
        <div class=" text-black text-size-20  " :class="selectedIndex1 == index ? 'text-green':''">
          {{item.userName}}</div>
        <div class="text-gray text-size-14  mt10">在读学员 | 生日：{{item.birthday}}</div>
      </div>

     <!-- <div class="classflex-end" style="width: 80%;">

           <el-button   @click="" style="width: 100px">续费提醒</el-button>
      </div> -->
    </div>

  </div>

    </div>
  </el-drawer>
</template>

<script>
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  export default {
    name: 'BirthdayStudentDrawer',
    dicts: ['sys_oper_type', 'student_relationship', 'student_state', 'student_sex', 'enrollment_channels',
      'student_grade'
    ],
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},


        rules_student: {
          userName: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 5,
              message: '长度在 1 到 5 个字符',
              trigger: 'blur'
            }
          ],
          relationship: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],


          phonenumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'change'
            },
            {
              min: 11,
              max: 12,
              message: '长度在 11 到 12 个字符',
              trigger: 'blur'
            }
          ],

        },
        form2: {},
        rules_student2: {
          userName: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          relationship: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],


          phonenumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'change'
            },
            {
              min: 11,
              max: 12,
              message: '长度在 11 到 12 个字符',
              trigger: 'blur'
            }
          ],

        },
        type: false,
        open_birthdaystudent: false,

        showtype: true,
        options: [],
        userList: [],
        studentList: [],
        queryParamsTeacher: {},
         selectedIndex1: 0,
         courseList: [],
         queryParamsCourse: {},
      }
    },
    props: {

      title: {
        default: "",
        type: String,
      },


    },
    computed: {

    },
    watch: {

    },
    created() {
        this.getList();
          this.getCourseList();
    },

    methods: {
      /** 查询课程管理列表 */
      getCourseList() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
		  this.queryParamsCourse.courseState ="在开课程";
        listCourse(this.queryParamsCourse).then(response => {
          this.courseList = response.rows;

        });
      },
      /** 查询学生信息列表 */
      getList() {

        this.queryParams.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParams).then(response => {
          this.studentList = response.rows;

        });
      },
      GetMessage(type, index, id) {

          this.selectedIndex1 = index;

      },
      search(){

      },
      openbirthdaystudent() {

        // console.log("走了2");
        this.open_birthdaystudent = true;
      },



      // 取消按钮
      cancel() {
        this.open_birthdaystudent = false;
        this.reset();
      },








      // 表单重置
      reset() {
        this.form = {
          id: null,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          delFlag: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },


    }





  }
</script>

<style lang="scss" scoped>
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
    background: rgba(0, 0, 0, .2);
    z-index: -1;
  }

  .rightPanel {
    width: 100%;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
    transition: all .25s cubic-bezier(.7, .3, .1, 1);
    transform: translate(100%);
    background: #fff;
    z-index: 40000;
  }

  .handle-button {
    width: 48px;
    height: 48px;
    position: absolute;
    left: -48px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 48px;

    i {
      font-size: 24px;
      line-height: 48px;
    }
  }
</style>
